<template>
  <div class="traffic">
    <h6 class="title">今日车流量对比</h6>
    <div class="southnNorth">
      <!-- 由南到北车流量 -->
      <div class="southnToNorth">
        <h6 class="SNtitle">由南到北</h6>
        <div class="imgBox">
          <img src="../../assets/loadImg/line_data.png" alt="" />
        </div>
        <div class="trafficNumber">
          <p>{{ trafficList.south }}</p>
        </div>
      </div>
      <!-- 由北到南车流量-->
      <div class="northToSouthn">
        <h6 class="SNtitle">由北到南</h6>
        <div class="imgBox">
          <img src="../../assets/loadImg/line_data.png" alt="" />
        </div>
        <div class="trafficNumber">
          <p>{{ trafficList.north }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import requistApi from '@/api'
import commonFn from '@/utils/commonFn'
import load from '../../api/load'
export default {
  components: {},
  data() {
    return {
      trafficList: {
        south: 0,
        north: 0,
      },
    }
  },
  mounted() {
    this.bridgeId = commonFn.getQueryVariable('bridgeId') || '758323582542544896'
    this.getTrafficDataList() // 获取今日车流量对比数据列表数据
    this.timer()
  },
  methods: {
    // 获取今日车流量对比数据
    getTrafficDataList(id = this.bridgeId) {
      let trafficContLeft = [] // 左侧数据
      let trafficContRigth = [] // 右侧数据
      let southNum = 0
      let northNum = 0
      this.loadingFlag1 = false
      this.$emit('trafficflow', this.loadingFlag1)
      requistApi.load.getTodayTrafficFlow(id, this.getParams()).then((res) => {
        if (res.data.data !== undefined && JSON.stringify(res.data.data) !== '{}') {
          trafficContLeft = res.data.data[0].value // 左侧数据
          trafficContRigth = res.data.data[1].value // 右侧数据
          trafficContLeft.map((item) => {
            southNum += item.trafficCount
          })
          this.trafficList.south = southNum
          this.noneDataFlag = false
          // 右侧数据
          for (let i = 0; i < trafficContRigth.length; i++) {
            northNum += trafficContRigth[i].trafficCount
          }
          this.trafficList.north = northNum
        }
      })
    },
    //
    getParams() {
      let token = commonFn.getQueryVariable('token') || ''
      let appkey = commonFn.getQueryVariable('app-key') || ''
      return { token, appkey }
    },
    timer() {
      return setInterval(() => {
        this.getTrafficDataList()
      }, 20000)
    },
  },
  destroyed() {
    clearInterval(this.timer) //清除定时器
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  margin-bottom: 10px;
}
.southnNorth {
  display: flex;
  .SNtitle {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 10.5px;
  }
  .southnToNorth {
    padding: 6px 8.5px;
    margin-right: 9px;
    box-shadow: 0px 2px 8px 0px rgba(173, 173, 173, 0.5);
    border-radius: 8px;
    height: 111px;
    width: 174px;
    background: #fff;
  }
  .northToSouthn {
    padding: 6px 8.5px;
    box-shadow: 0px 2px 8px 0px rgba(173, 173, 173, 0.5);
    border-radius: 8px;
    height: 111px;
    width: 174px;
    background: #fff;
    .noneData {
      font-size: 16px;
    }
  }
  .imgBox {
    margin-top: 22px;
    img {
      width: 130px;
      margin-left: 6.5px;
    }
  }
  p {
    text-align: center;
    color: #333333;
    font-size: 16.5px;
    margin-top: 3px;
    font-weight: 400;
    letter-spacing: 2px;
    font-weight: 400;
  }
}
</style>
